<template>
  <div class="echarts-box">
    <div class="temp1-title">
      <span :style="com_style">{{'▎' + cut_title}}</span>
      <span class="iconfont icon-jiantou temp1-title-icon" :style="com_style" @click="show_choice = !show_choice"></span>
      <div class="select-container" v-show="show_choice">
        <div class="select-item" v-for="item in temp1_type" :key="item.id" @click="handleSelect(item.id)">
          <span v-show="item.id != cut_id" :style="com_style">{{item.label}}</span>
        </div>
      </div>
    </div>
    <div class="my-echarts" ref="temp1_echarts">783489032my-echarts</div>
  </div>
</template>

<script>
import * as Echarts from 'echarts'

export default {
  name: 'Temp1Echarts',
  data() {
    return {
      temp1_type: [{id:'map', label: '地区问题趋势'},{id:'group', label: '公司问题趋势'},{id:'branch', label: '网点问题趋势'}],
      cut_id: 'map',
      show_choice: false,
      title_fontsize: 0,   // 标题文字

      chart_instance: null,
      all_data: {
        map: {
          title: '地区问题趋势',
          base: 530,
          unit: '万',
          data: [
            {name: '北京', data: [132,45,56,75,76,95, 45,67,376,56,45,34]},
            {name: '重庆', data: [32,145,256,175,176,295, 145,167,76,456,145,174]},
            {name: '上海', data: [632,345,6,70,176,295, 145,167,176,156,145,214]},
            {name: '深圳', data: [232,445,356,375,176,95, 145,167,37,245,134,329]},
            {name: '杭州', data: [132,145,156,275,376,695, 145,167,176,256,145,534]},
          ]
        },

        group: {
          title: '公司事件趋势',
          base: 530,
          unit: '万',
          data: [
            {name: '邮政', data: [32,145,256,375,476,95, 45,567,376,56,545,34]},
            {name: '申通', data: [32,145,56,175,176,295, 45,167,76,456,145,174]},
            {name: '圆通', data: [632,345,6,70,176,295, 145,167,76,56,145,214]},
            {name: '中通', data: [232,445,356,375,176,95, 45,167,37,245,134,29]},
            {name: '韵达', data: [132,145,156,275,376,695, 145,167,176,256,145,534]},
          ]
        },

        branch: {
          title: '网点事件趋势',
          base: 530,
          unit: '万',
          data: [
            {name: '北京大兴网点', data: [132,45,56,5,76,95, 45,67,376,56,45,34]},
            {name: '深圳南山网点', data: [32,145,256,75,176,295, 145,167,76,456,145,174]},
            {name: '上海虹桥网点', data: [632,345,6,70,76,295, 145,167,176,156,145,214]},
            {name: '北海海城网点', data: [232,445,356,75,176,95, 145,167,37,245,134,329]},
            {name: '杭州网点', data: [132,145,156,275,76,95, 145,167,176,256,145,34]},
          ]
        },
        common: {
          month: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
        },
        type: {}
        
      },
    }
  },
  mounted() {
    // console.log(Echarts);
    // this.$nextTick(() => {
      
    // })
    this.initChart()
    this.getData()
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
  },
  destroyed() {
    // 在组建销毁时, 销毁监听器
    window.removeEventListener('resize', this.screenAdapter)
  },
  computed: {
    cut_title() {
      if(this.cut_id=='map') return '地区问题趋势'
      else if(this.cut_id=='group') return '公司问题趋势'
      else if(this.cut_id=='branch') return '网点问题趋势'
      else return ''
    },
    // 标题字体大小
    com_style() {
      return {
        fontSize: this.title_fontsize + 'px'
      }
    }
  },
  
  methods: {
    // 切换类型 选项
    handleSelect(key) {
      this.cut_id = key
      this.updateChart()
      this.show_choice = false
    },

    // 初始化 initChart
    initChart() {
      this.chart_instance = Echarts.init( this.$refs['temp1_echarts'], 'dark' )
      // 对图表初始化配置的控制
      const initOption = {
        title: {
          // text: '▎地区问题趋势',
          textStyle: {
          },
          left: 20,
          top: 20,
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          left: 20,
          top: '15%',
          icon: 'circle'
        },
        grid: {   // 配置整个直角坐标系的
          top: '35%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,   // 距离是保函坐标轴上的文字的
        },
        xAxis: {   // 直角坐标x轴
          type: 'category',
          boundaryGap: false,
        },
        yAxis: {   // 直角坐标y轴
          type: 'value',
        },
        series: [
          {
            type: 'line',
            label: {
              show: true,   // 数值 文字的展示
              position: 'right',
              textStyle: {
                color: 'white',
              }
            },
            itemStyle: {
              // color: 'red',
            },
          }
        ]
      }

      this.chart_instance.setOption(initOption)
    },
    // 请求数据 getData
    getData() {
      this.updateChart()
    },
    // 更新图表updateChart--->设置option,柱状图type为bar
    updateChart() {
      // 半透明
      const colorArr1 = [
        'rgba(44, 110, 255, 0.5)',
        'rgba(11, 168, 44, 0.5)',
        'rgba(250, 105, 0, 0.5)',
        'rgba(254, 33, 30, 0.5)',
        'rgba(22, 242, 217, 0.5)',
      ]
      // 全透明
      const colorArr2 = [
        'rgba(44, 110, 2554, 0)',
        'rgba(11, 168, 44, 0)',
        'rgba(250, 105, 0, 0)',
        'rgba(254, 33, 30, 0)',
        'rgba(22, 242, 217, 0)',
      ]
      const timeArr = this.all_data.common.month
      const valueArr = this.all_data[this.cut_id].data
      const seriesArr = valueArr.map( (item,index) => {
        return {
          name: item.name,
          type: 'line',
          data: item.data,
          stack: this.cut_id,   // 堆叠图
          smooth: true,   // 平滑曲线
          areaStyle: {
            color: new Echarts.graphic.LinearGradient(0,0,0,1, [
              {
                offset: 0,
                color: colorArr1[index]   // 0% 的颜色值
              },
              {
                offset: 1,
                color: colorArr2[index]   // 100% 的颜色值
              }
            ])
          }
        }
      })

      // 图例的数据
      const legendArr = valueArr.map(item => {
        return item.name
      })
      const dataOption = {
        xAxis: {
          data: timeArr
        },
        legend: {
          data: legendArr
        },
        series: [
          ...seriesArr
          // {
          //   data: value_list,
          // }
        ],
      }
      this.chart_instance.setOption(dataOption)
    },

    // 浏览器大小发生变化, 完成屏幕适配
    screenAdapter() {
      this.title_fontsize = this.$refs['temp1_echarts'].offsetWidth / 100 * 3.6
      const adapterOption = {
        legend: {
          itemWidth: this.title_fontsize/3,
          itemHeight: this.title_fontsize/3,
          itemGap: this.title_fontsize/3,
          textStyle: {
            fontSize: this.title_fontsize/3
          }
        },
        series: [
          {
          }
        ]
      }
      this.chart_instance.setOption(adapterOption)
      // 手动调用图表对象的resize 才能产生效果
      this.chart_instance.resize()
    },

  },
}
</script>


<style lang="scss">

</style>

<style lang="scss" scoped>
.temp1-title {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 10;
  color: #ffffff;
  .temp1-title-icon {
    margin-left: 10px;
    cursor: pointer;
  }
  .select-container {
    .select-item {
      cursor: pointer;
      margin-top: 5px;
      background-color: rgba($color: #111122, $alpha: 0.6);
    }
  }
}
</style>